<template>
	<view class="content-class">
		<u-row class="tip" justify="space-between">
			<u-row>
				<span>心包经</span>
				<u-image style="transform: rotate(90deg);margin-left:10px" width="20px" height="20px"
					src="../../static/images/measuring/arrow.png"></u-image>
			</u-row>
			<span style="font-size: 14px;color:#999;font-weight: 500;">注：应激态未参与平均值统计</span>
		</u-row>
		<view class="health-trends">
			<charts :option="option" id="HealthTrends1" :height="193"></charts>
			<view v-for="i in option3" :key="i.title" class="item-type">
				<view class="dot" :style="{backgroundColor:i.color}"></view>
				{{i.title}}
			</view>
		</view>

		<view class="sport-btn" @click="skipTCMReport">查看周报告</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				option3: [{
					title: '经络测量值',
					color: '#FFD8BB',
				}, {
					title: '经络平均值',
					color: '#54D7A5',
				}],
				option: {
					grid: {
						left: "15px",
						right: "10px",
						height: "70%",
						width: '95%',
						bottom: "10px",
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						nameTextStyle: {
							align: 'center'
						},
						data: ['03-05', '03-06', '03-07', '03-08', '03-09', '03-10', '03-11'],
						axisTick: {
							show: false,
						},
						axisLabel: {
							interval: 0,
							margin: 15,
							textStyle: {
								color: '#999',
								fontSize: 10,
							},
						},
					},
					yAxis: {
						name: '经络值',
						nameLocation: 'end',
						nameTextStyle: {
							color: "#999",
							fontSize: 12,
							padding: [0, -15, 0, 0]
						},
						position: 'right',
						type: 'value',
						// max: 90,
						// min: 30,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "rgba(255,255,255,0.2)",
							},
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#999',
								fontSize: 10,
							},
						},
					},
					series: [{
						data: [120, 200, 150, 80, 70, 90, 130],
						type: 'line',
						showAllSymbol: true,
						symbol: 'circle',
						symbolSize: 4, // 设置点的大小
						itemStyle: {
							color: 'transparent', // 设置标记点的颜色
							borderColor: '#FFD8BB', // 设置边框颜色（可以是白色或其他颜色）
							borderWidth: 2, // 设置边框宽度
						},
						lineStyle: {
							width: 1,
							color: '#FFD8BB'
						}
					}, {
						data: [110, 110, 110, 110, 110, 110, 110],
						type: 'line',
						showSymbol: false,
						lineStyle: {
							width: 1,
							color: '#54D7A5'
						}
					}]

				}
			};
		},
		methods: {
			skipTCMReport() {
				uni.navigateTo({
					url: "/pages/TCMReport/TCMReport"
				})
			}
		},
		computed: {
			...mapGetters(["statusBarHeight"]),
		},
	};
</script>

<style scoped lang="scss">
	.content-class {

		padding-left: 15px;
		padding-right: 15px;

		.health-trends {

			.item-type {
				margin-left: 15px;
				display: inline-flex;
				align-items: center;
				font-size: 12px;
				margin-right: 5px;

				.dot {
					width: 5px;
					height: 5px;
					border-radius: 50%;
					margin-right: 6px;
				}
			}
		}

		.tip {
			background-image: url("../../static/images/homePage/border.png");
			background-size: 100% 100%;
			background-position: top;
			background-repeat: no-repeat;
			font-weight: 500;
			font-size: 14px;
			color: #FFD8BB;
			padding: 14px 25px;
			display: inline-flex;
			align-items: center;
			text-align: center;
			width: calc(100% - 50px);
			margin: 15px 0px 15px 0px;

			span {

				font-weight: bold;
				font-size: 22px;
				color: #FFD8BB;

			}
		}

		.sport-btn {
			display: flex;
			align-items: center;
			background: linear-gradient(90deg, #FFD8BB 0%, #F0986A 100%);
			border-radius: 30px;
			font-size: 18px;
			color: #0B0F12;
			text-align: center;
			justify-content: center;
			height: 52px;
			margin: 80px 20px 0px 20px;
			font-weight: bold;
		}


	}
</style>